<template>
  <van-button 
    v-if="is_follow" 
    class="follow-btn" 
    round 
    type="info" 
    color="#ccc" 
    :loading="loading"
    @click="onFollow"
    > 已关注</van-button>
    <van-button 
      v-else 
      class="follow-btn" 
      round type="info" 
      color="#3296fa" 
      :loading="loading"
      @click="onFollow"
      > +关注</van-button>
</template>
<script>
import {addFollowAPI,deleteFollowAPI} from '@/api'

export default {
  name:"Follow",
  components:{},
  model:{
    prop:'is_follow',
    event:'update_isFollow'
  },
  props:{
    is_follow:{
      type:Boolean,
      required:true
    },
    user_id:{
      type:[String,Number,Object],
      required:true
    }
  },
  data(){
    return {
      loading:false,
    }
  },
  computed:{},
  watch:{},
  methods:{
    async onFollow(){
      this.loading=true
      try{
        if(this.is_follow){
          //已关注则取消关注
          await deleteFollowAPI(this.user_id)
          // this.article.is_followed=false
        }else{
          //未关注则添加关注
          await addFollowAPI(this.user_id)
          // this.article.is_followed=true
        }
        this.$emit('update_isFollow',!this.is_follow)
      }catch(err){
        let message="操作失败,请重试!"
        if(err.response&&err.response.status==400){
          message="你不能关注你自己!"
        }
        this.$toast(message)
      }
      this.loading=false

    }
  }
}
</script>
<style lang="less" scoped>
</style>